<template>
    <el-dialog
        v-model="show"
        title="打印报表"
        width="50%"
        modal-class="finacial-print-dailog"
    >
        <AppPageTable
            stripe
            :data="tableData.data"
            @change="getList"
            :tableHeight="'500px'"
            :option="tableData.option"
        >
            <el-table-column
                width="55"
                align="center"
            > <template #default="scope">
                    <el-radio
                        v-model="scope.row.radio"
                        @click="rowRadioChange($event, scope.row.index, scope.row.radio)"
                    ></el-radio>
                </template>
            </el-table-column>
            <el-table-column
                label="报表名称"
                prop="name"
            />
        </AppPageTable>
        <template #footer>
            <div class="button-container">
                <el-button type="primary">excel导出</el-button>
                <el-button type="primary">
                    word导出
                </el-button>
                <el-button type="primary">pdf导出</el-button>
                <el-button type="primary">
                    预&nbsp;览
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import { defineComponent } from "vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import dayjs from "dayjs";
export default defineComponent({
    components: {
        AppPageTable,
    },
    props: {
    },
    computed: {
    },
    data() {
        return {
            show: false,
            //表格数据
            tableData: {
                data: [
                    {
                        index: 1,
                        radio: false,
                        name: "付款销账明细"
                    },
                    {
                        index: 2,
                        radio: false,
                        name: "付款销账明细"
                    },
                ],
                option: useTableOption(),
            },
        }
    },
    methods: {

        // 打开dailog
        open() {
            this.show = true;
        },

        // 列表数据
        async getList() {

        },

        //单选点击 
        rowRadioChange(el, index, val) {
            if (el.target.tagName === 'INPUT') return
            for (const iterator of this.tableData.data) {
                if (iterator.index != index) {
                    iterator.radio = false;
                };
            };
        },

    },
    watch: {

    },

    created() {

    },
});
</script>

<style lang="scss">
.finacial-print-dailog {
    .el-dialog__header {
        border-bottom: 1px solid #e8e8e8;
    }

    .el-dialog {
        min-width: 630px;
    }

    .el-dialog__footer {
        border-top: 1px solid #e8e8e8;
    }
}
</style>
<style lang="scss" scoped>
.button-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

:deep(.el-table--small .el-table__cell) {
    border-right: none;
}
</style>
